<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03文本插值及指令</title>
    <style>
        .red{
            color:red;
        }
        .block{
            font-weight:bold;
        }
    </style>
</head>
<body>
<div id="app">
    <p>计算器：{{ counter }}</p>
    <!--模板语法支持：运算、三元运算符、js函数，不支持：赋值语句、条件判断-->
    <p>计算器：{{ counter+1 }}</p>
    <p>计算器：{{ counter>0 ? "counter&gt0" : "counter&lt0" }}</p>    
    <p>Content：{{ "bala@999.com".split("@") }}</p>
    <!--仅应用counter的初始值，counter修改后对此节点无效-->
    <p>计算器：<span v-once>{{ counter }}</span></p>
    <!--文本插值会把html标签当作普通字符串处理-->
    <p>{{ rawContent }}</p>
    <p v-text="rawContent"></p>
    <p v-html="rawContent"></p>
    <!--文本插值不能用在html attribute中-->
    <p class="red">Vue3.x - 直接设置class</p>
    <p class="{{className}}">Vue3.x - 文本插值设置class</p>
    <p v-bind:class="className">Vue3.x - 完整版v-bind设置class</p>
    <p :class="className">Vue3.x - 简写版v-bind设置class</p>
    <p :class="complexClassName">Vue3.x - complexClassName</p>
</div>
<script src="../vue.global.3.0.5.js"></script>
<script>
    //声明一个选项对象
    const App={
        //初始数据
        data() {
            return {
                counter: 100,
                rawContent: "<span style='color:red;'>Vue3.x</span>",
                className: "red",
                complexClassName: {
                    red: true,
                    block: true
                }
            }
        }
    }

    //全局API对象，创建应用对象返回(选项对象).挂载方法(DOM节点)
    const vm = Vue.createApp(App).mount("#app");
</script>
</body>
</html>